<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/common/taglib.jsp" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<title> 한국의 논매기 소리 </title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta charset="utf-8">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<link href="/css/reset.css" type="text/css" rel="stylesheet" />
<link href="/css/common.css" type="text/css" rel="stylesheet" />
<link href="/css/layout.css" type="text/css" rel="stylesheet" />
<link href="/css/ui.css" type="text/css" rel="stylesheet" />
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>
<!--script src="/js/gnb.min.js" type="text/javascript"></script-->
<script src="/js/gnb_ui.js" type="text/javascript"></script>
<script src="/js/left_menu.js" type="text/javascript"></script>
<script src="/js/ui.js" type="text/javascript"></script>
<script>
	//댑스별 메뉴 활성화
	var navCurrentParam1 = 2;//1depth
	var navCurrentParam2 = 0;//2depth
	var navCurrentParam3 = 0;//3depth
	
	function fncPage(page) {
		var frm = document.searchVO; 
		frm.page.value = page;
		frm.submit();
	}
	
	function fncChangeArea1() {
		$("#areaCd").val($("#region1 option:selected").val());
		fncChangeArea("region2", $("#areaCd").val());
		$("#region3").html("<option value=''>선택</option>");
	}

	function fncChangeArea2() {
		$("#areaCd").val($("#region2 option:selected").val());
		fncChangeArea("region3", $("#areaCd").val());
	}

	function fncChangeArea3() {
		$("#areaCd").val($("#region3 option:selected").val());
	}
	
	function fncChangeArea(cNm, areaCd) {
		$.getJSON('/item/changeArea.do?areaCd='+areaCd, function(data) {
			var resultList = data.regionList;
			var itemListHtml = "";
			itemListHtml += "<option value=''>선택</option>";
			if(resultList.length > 0){
				for(var i = 0; i < resultList.length; i++) {
					var region = resultList[i];
					itemListHtml += "<option value=\""+region.codeId+"\">"+region.codeName+"</option>";
				}
			}
			$("#"+cNm).html(itemListHtml);
		});
	}
	
	function fncDetailSearchResult() {
		var keyword = "";
		keyword += $('#itemNm').val();
		keyword += $('#otherNm').val();
		keyword += $('#originTapeNm').val();
		keyword += $('#singerNm').val();
		keyword += $('#referenceBookNm').val();
		keyword += $('#areaNm').val();
		keyword += $('#songExplanationCntn').val();
		keyword += $('#itemTypeCntn').val();
		keyword += $('#region1').val();
		keyword += $('#region2').val();
		keyword += $('#region3').val();
		keyword += $('#areaCd').val();
		
		if ($.trim(keyword)) {
			$('#searchVO').submit();
		} else {
			alert('입력된 검색어가 올바르지 않습니다. 다시입력해주세요');
		}
	}
	
	function fncFormReset() {
		$('#itemNm').val("");
		$('#otherNm').val("");
		$('#originTapeNm').val("");
		$('#singerNm').val("");
		$('#referenceBookNm').val("");
		$('#areaNm').val("");
		$('#songExplanationCntn').val("");
		$('#itemTypeCntn').val("");
		$('#region1').val("");
		$('#region2').val("");
		$('#region3').val("");
		$('#areaCd').val("");
	}
	
	function fncTotalSearch() {
		searchResult("${totalSearchWord}");
	}
	
	function fncDetailSearch() {
		window.location.href = "/search/detailSearch.do";
	}
</script>	
</head>
<body>
<!-- 메뉴건너뛰기 -->
<div id="skipnavigation">
	<a href="#header">상단메뉴 바로가기</a>
	<a href="#container">컨텐츠 바로가기</a>
	<a href="#footer">하단 바로가기</a>
</div>
<!-- //메뉴건너뛰기 -->
<div class="wrap">
	<!-- Header -->
	<jsp:include page="../common/header.jsp"></jsp:include>
	<!--// Header -->
	<!-- 컨텐츠 -->
	<form:form commandName="searchVO" id="searchVO" action="/search/resultList.do" method="get">
	<form:hidden path="areaCd"/>
	<form:hidden path="page"/>
	<div id="container" class="bg_sub">
		<div class="sub_wrap">
			<!-- 내용영역 -->
			<div class="sub_content">
				<div class="left_menu">
					<h2><img src="/img/leftMenu4.png" alt="검색서비스"/></h2>
					<!-- left 메뉴 -->
					<div id="left">
						<ul class="navmenu navmenu4">
							<li class="nvparam1"><a href="javascript:fncTotalSearch()">통합검색</a></li>
							<li class="nvparam2"><a href="javascript:fncDetailSearch()">상세검색</a></li>
						</ul>
					</div>
					<!-- //left 메뉴 -->
				</div>
				<div class="sub_area">
					<!-- 서브 네비게이션 -->
					<ul class="sub_navi">
						<li><a href="/"><img src="/img/sub_navi1.gif" alt="home"/></a></li>
						<li><a href="#">검색서비스</a></li>
						<li class="sel_navi"><a href="javascript:fncDetailSearch()">상세검색</a></li>
					</ul>
					<!-- //서브 네비게이션 -->
					<div class="sub_tit">
						<h3><img src="/img/subMenu_tit4.gif" alt="상세검색"/></h3>
					</div>
					<!-- 리스트 목록 -->
					<div class="tb_sch_list">
						<table>
							<tbody>
								<tr>
									<th scope="row">제목</th>
									<td>
										<form:input path="itemNm" cssClass="it419"  />
									</td>
								</tr>
								<tr>
									<th scope="row">대체 제목</th>
									<td>
										<form:input path="otherNm" cssClass="it419"  />
									</td>
								</tr>
								<tr>
									<th scope="row">원테잎명</th>
									<td>
										<form:input path="originTapeNm" cssClass="it419"  />
									</td>
								</tr>
								<tr>
									<th scope="row">가창자</th>
									<td>
										<form:input path="singerNm" cssClass="it419"  />
									</td>
								</tr>
								<tr>
									<th scope="row">관련서적</th>
									<td>
										<form:input path="referenceBookNm" cssClass="it419"  />
									</td>
								</tr>
								<tr>
									<th scope="row">지명</th>
									<td>
										<form:input path="areaNm" cssClass="it419"  />
									</td>
								</tr>
								<tr>
									<th scope="row">곡해설</th>
									<td>
										<form:input path="songExplanationCntn" cssClass="it419"  />
									</td>
								</tr>
								<tr>
									<th scope="row">유형 분류</th>
									<td>
										<form:input path="itemTypeCntn" cssClass="it419"  />
									</td>
								</tr>
								<tr>
									<th scope="row">지역 분류</th>
									<td>
										<!-- 첫번째 -->
										<select class="bg_sel" style="width:80px;" id="region1" onchange="fncChangeArea1()">
											<option value="">선택</option>
											<c:forEach var="region" items="${regionList1}">
												<option value="${region.codeId }">${region.codeName }</option>	
											</c:forEach>
										</select>
										<!-- //첫번째 -->
										<!-- 두번째 -->
										<select style="width:80px;"  id="region2" onchange="fncChangeArea2()">
											<option value="">선택</option>
										</select>
										<!-- //두번째 -->
										<!-- 세번째 -->
										<select style="width:80px;"  id="region3" onchange="fncChangeArea3()">
											<option value="">선택</option>
										</select>
										<!-- //세번째 -->
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<!-- //리스트 목록 -->
					<!-- 버튼 -->
					<div class="btn_area">
						<div class="t_center">
							<a href="javascript:fncDetailSearchResult()" class="btn_list_view"><span>검색</span></a>
							<a href="javascript:fncFormReset()" class="btn_list_view"><span>다시쓰기</span></a>
						</div>
					</div>
					<!-- //버튼 -->
				</div>
			</div>
			<!-- //내용영역 -->
		</div>
	</div>
	</form:form>
	<!-- //컨텐츠 -->
	<!-- 하단 -->
	<jsp:include page="../common/footer.jsp"></jsp:include>
	<!-- //하단 -->
</div>
<script type="text/javascript">
//<![CDATA[
(function ($) {
	$(document).ready(function() {
		//검색창
		$('.search').schSelect();
		//gnb 메뉴
		navigation("gnb_wrap", "slide");
		
		$( "#keyword" ).keypress(function( event ) {
			  if ( event.which == 13 ) {
				  searchWithinResults();
			  }
		});
		
		$( "#searchButton" ).click(function( event ) {
			searchWithinResults();
		});
	});
}(jQuery));
//]]>
</script>
</body>
</html>